<template>
  <div class="imageVideoDetail">
    <div class="top flex-center-start">
      <div class="back" @click="goBack"></div>
      <div class="tit extend-click" @click="goBack">返回</div>
      <span class="download" @click="download">
        <el-tooltip effect="dark" content="下载" placement="top">
          <em class="el-icon-download" />
        </el-tooltip>
      </span>
    </div>
    <div class="mid-wrap">
      <!-- 图像详情 -->
      <div
        class="image-con"
        v-if="dataTypeTabsId == 2"
        :style="{ backgroundImage: `url('${imageURL}')` }"
      ></div>
      <!-- 视频详情 -->
      <div class="video-con" v-if="dataTypeTabsId == 3">
        <d-player ref="player" class="video" :options="videoOptions" />
      </div>
    </div>
    <!-- 图像评价 -->
    <div class="evaluate" v-if="dataTypeTabsId == 2">
      <div class="title">评价:</div>
      <p v-if="showEvaluate" class="noEvaluate">暂无评价</p>
      <div class="evaluateAll">
        <ul
          class="evaluateList"
          v-for="(item, index) in this.$route.params.list"
          :key="index"
        >
          <li>
            <dd>
              <span>{{ item.userName }}</span
              ><span v-if="item.score == 1">(清晰度：模糊)</span
              ><span v-if="item.score == 2">(清晰度：一般)</span
              ><span v-if="item.score == 3">(清晰度：清晰)</span>
            </dd>
            <dt>{{ item.createTime }}</dt>
          </li>
          <li>{{ item.evaluate }}</li>
        </ul>
      </div>
    </div>
    <!-- 视频评价 -->
    <div class="evaluate" v-if="dataTypeTabsId == 3">
      <div class="title">评价</div>
      <p v-if="showVideoEvaluate" class="noEvaluate">暂无评价</p>
      <div class="evaluateAll">
        <ul
          class="evaluateList"
          v-for="(item, index) in this.$route.params.videoList"
          :key="index"
        >
          <li>
            <dd>
              <span>{{ item.userName }}</span>
              <span v-if="item.score == 1">(清晰度：模糊)</span>
              <span v-if="item.score == 2">(清晰度：一般)</span>
              <span v-if="item.score == 3">(清晰度：清晰)</span>
            </dd>
            <dt>{{ item.createTime }}</dt>
          </li>
          <li>{{ item.evaluate }}</li>
        </ul>
      </div>
    </div>
    <asideDetail :choosedItem="choosedItem"></asideDetail>
  </div>
</template>

<script>
import { mapState } from "vuex";
import VueDPlayer from "vue-dplayer";
import "vue-dplayer/dist/vue-dplayer.css";
import asideDetail from "@/components/imageVideo/asideDetail.vue";
export default {
  name: "imageVideoDetail",
  components: {
    "d-player": VueDPlayer,
    asideDetail,
  },
  computed: {
    ...mapState({
      dataTypeTabsId(state) {
        return state.app.dataTypeTabsId;
      },
      id() {
        return this.$route.params.item.id;
      },
    }),
  },
  data() {
    return {
      videoOptions: {
        container: document.getElementById("dplayer"), //播放器容器
        mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
        theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
        loop: false, // 是否自动循环
        lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
        screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
        hotkey: true, // 是否支持热键，调节音量，播放，暂停等
        preload: "auto", // 自动预加载
        volume: 0.7, // 初始化音量
        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], //可选的播放速度，可自定义
        // logo:
        // "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
        video: {
          url: "",
        },
      },
      imageURL: "",
      choosedItem: {},
      videoURL: "",
      player: null,
      evaluateList: [],
      evaluateVideoList: [],
      showEvaluate: false,
      showVideoEvaluate: false,
    };
  },

  activated() {
    console.log(this.$route.params.list);
    if (this.$route.params.item) {
      console.log(this.$route.params.item);
      this.imageURL =
        window.VUE_APP_BASE_URL + "/" + this.$route.params.item.fileUrl;
      // tif 转 png
      if (this.imageURL.toLowerCase().indexOf(".tif") != -1) {
        this.imageURL = this.imageURL
          .split("")
          .reverse()
          .join("")
          .replace(/fit./, "gnp.")
          .split("")
          .reverse()
          .join("");
      }
      this.choosedItem = this.$route.params.item;
      this.videoURL =
        window.VUE_APP_BASE_URL + "/" + this.$route.params.item.fileUrl;

      if (this.dataTypeTabsId == 2) {
        if (this.$route.params.list.length == 0) {
          this.showEvaluate = true;
        } else {
          this.showEvaluate = false;
        }
      } else if (this.dataTypeTabsId == 3) {
        if (this.$route.params.videoList.length == 0) {
          this.showVideoEvaluate = true;
        } else {
          this.showVideoEvaluate = false;
        }
      }
    } else {
      this.$router.go(-1);
    }
    if (this.dataTypeTabsId == 3 && this.player) {
      this.playURL(this.videoURL);
    }
  },
  mounted() {
    this.player = this.$refs.player.dp;
    if (this.player) {
      // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
      document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
      document.querySelector(".dplayer-mask").remove();
      /* document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
      let length = document.querySelectorAll(".dplayer-menu-item").length;
      document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
      document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息 */
      if (this.dataTypeTabsId == 3) {
        this.playURL(this.videoURL);
      }
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 播放
    playURL(url) {
      this.$refs.player.dp.switchVideo({
        url: url,
      });
    },
    // 文件下载
    download() {
      /* console.log(
        this.$route.params.item,
        this.$route.params.item.fileUrl.split("/").pop().toLowerCase()
      );
      let data = {
        connectionType: this.dataTypeTabsId,
        fileName: this.$route.params.item.fileUrl.split("/").pop().toLowerCase(),
        uploadFileName: this.$route.params.item.uploadFileName,
      };
      this.$api.fileDown(data).then((res) => {
        console.log(res);
      }); */
      let url = `${window.VUE_APP_BASE_URL}/file/fileDown?`;
      const fileUrl = this.$route.params.item.fileUrl + "";
      /* const connectionType = this.$route.params.item.connectionType;
      const fileName = fileUrl.substring(
        fileUrl.lastIndexOf("/") + 1,
        fileUrl.length
      );
      const uploadFileName = this.$route.params.item.uploadFileName;
      url += "connectionType=" + this.dataTypeTabsId;
      url += "&fileName=" + fileName;
      url += "&uploadFileName=" + uploadFileName; */
      url += "fileUrl=" + fileUrl;
      console.log(this.$route, 111111111);
      window.location.href = url;
      // 下载量
      /* this.updateById({
        connectionType: this.$route.params.item.connectionType,
        id: this.$route.params.item.id,
        downloads: 1,
      }); */
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.imageVideoDetail {
  @include scrollBar;
  height: calc(100vh - 0.76rem);
  margin-right: 2.87rem;
  margin-left: 0.05rem;
  .top {
    position: relative;
    margin-left: 0.6rem;
    .back {
      cursor: pointer;
      background-image: url(~@/assets/images/back@2x.png);
      width: 0.08rem;
      height: 0.14rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    .tit {
      cursor: pointer;
      margin-left: 0.1rem;
      font-size: 0.14rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #1890ff;
      line-height: 0.47rem;
    }
  }
  .mid-wrap {
    margin: 0 auto;
    width: 11.58rem;
    min-height: 6rem;
    border-radius: 0.1rem;
    .image-con {
      margin-top: 0.3rem;
      width: 100%;
      height: 6rem;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
    .video-con {
      margin-top: 0.3rem;
    }
  }
  .aside-detail {
    // width: 2.87rem;
    // position: fixed;
    // right: 0;
    // bottom: 0;
    // height: calc(100vh - 0.76rem);
    // background: #404040;
    & > div {
      width: 2.4rem;
      margin: 0 auto;
    }
    .logo {
      // background-image: url(~@/assets/common/20.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      margin-top: 0.53rem;
      height: 1.6rem;
      border-radius: 0.1rem;
    }
    .title {
      margin-top: 0.12rem;
      font-size: 0.14rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #ffffff;
    }
    .des {
      margin-top: 0.1rem;
      font-size: 0.14rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #bbbbbb;
    }
    .tags {
      margin-top: 0.2rem;
      width: 2.4rem;
      height: 1rem;
      background: #383838;
      border-radius: 0.05rem;
    }
    .text-con {
      .tit {
        margin-top: 0.2rem;
        font-size: 0.14rem;
        font-weight: 400;
        color: #ffffff;
      }
      .params {
        margin-top: 0.1rem;
        font-size: 0.14rem;
        font-weight: 400;
        color: #ffffff;
        opacity: 0.67;
      }
    }
  }
}
::v-deep .dplayer-logo {
  display: none !important;
}

.evaluate {
  @include scrollBar;
  margin-top: 0.3rem;
  height: 1.6rem;
  overflow-y: auto;
  .title {
    width: 100%;
    padding: 0 0.7rem;
    height: 0.48rem;
    background: rgba($color: #1890ff, $alpha: 0.3);
    line-height: 0.48rem;
    font-size: 0.2rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
  }
  .noEvaluate {
    font-size: 0.18rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
    margin: auto;
    text-align: center;
  }
  .evaluateAll {
    @include scrollBar;
    min-height: 0.8rem;
    overflow: auto;
    .evaluateList {
      // width: 82%;
      min-height: 1rem;
      margin: 0 0.7rem;
      padding: 0.1rem 0;
      border-bottom: 2px solid #404040;

      li {
        display: flex;
        margin-top: 0.1rem;
        justify-content: space-between;
        dd {
          span:nth-of-type(1) {
            margin-right: 0.4rem;
            font-size: 0.14rem;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #898988;
          }
          span:nth-of-type(2) {
            font-size: 0.14rem;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #fba613;
          }
        }
        dt {
          font-size: 0.14rem;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #ffffff;
        }
      }
      li:nth-of-type(2) {
        font-size: 0.18rem;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
.video {
  position: relative;
  ::v-deep.el-icon-download {
    z-index: 1000;
    position: absolute;
  }
}
.download {
  width: 0.26rem;
  height: 0.26rem;
  cursor: pointer;
  position: absolute;
  top: 0.1rem;
  right: 0.3rem;
  color: #ffffff;
}
</style>